<!DOCTYPE html>
<html lang="en">
<head>
<title>OpenCPU Markdown App</title>
    
<script src="underscore-min.js"></script>    
<script src="jquery-1.10.1.min.js"></script>
<script src="opencpu.js"></script>
<script src="src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

<script>
$(function(){
  var editor = ace.edit("editor");
  editor.setTheme("ace/theme/monokai");
  editor.getSession().setMode("ace/mode/r");
  editor.setFontSize("14px");

  //This app requires OpenCPU 1.0.1 or higher!
  
  function domarkdown(e){
    var req = opencpu.r_fun_call("make_chart", {
      text : editor.getSession().getValue()
    }, function(session){
      $("#output").attr('src', session.getLoc() + "files/output.html");     
    }).fail(function(text){
      alert("Error: " + req.responseText);
    });
  }

  //auto run after 3 seconds of no activity
  var update = _.debounce(domarkdown, 3000);
  
  //register event
  editor.on("change", update);
  
  //init on start
  domarkdown();  
});
</script>

<style type="text/css" media="screen">
 
#deck { 
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50%;
  height: 50%;
}

#editor { 
  position: absolute;
  top: 400px;
  left: 0px;
  width: 50%;
  height: 50%;
}

iframe { 
  position: absolute;
  top: 0px;
  right: 0px;
  width: 720px;
  height: 100%;
  border: 0;
  margin: 0;
  z-index: 999999;
}

</style>
</head>
<body>

<iframe src='test2.html' id='deck'></iframe>

<div id="editor">require(rCharts)
rPlot(mpg ~ wt, data = mtcars, type = 'point')
</div>

<iframe src="about:blank" id='output'></iframe>

</body>
</html>
